<template>
  <section class="todoapp">
    <!-- 使用子组件 -->
    <ToHeader></ToHeader>
    <ToBody
      :list="list"
      @del="delFn"
      @changeFn="changeFn"
      @add="addFn"
    ></ToBody>
    <TodoFooter
      :deleList="deleList"
      v-show="list.length > 0"
      :showBtn="showBtn"
      @cleardata="cleardata"
      @filter="filter"
      :type="type"
    ></TodoFooter>
  </section>
</template>

<script>
// 引入子组件
import ToHeader from './components/ToHeader.vue'
import ToBody from './components/ToBody.vue'
import TodoFooter from './components/TodoFooter.vue'

export default {
  // 注册子组件
  components: {
    ToHeader,
    ToBody,
    TodoFooter,
  },
  // 定义数据
  data() {
    return {
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
        { id: 3, name: '打豆豆', isDone: true },
      ],
    }
  },
  // 方法集合
  methods: {
    // 点击删除对应的数据
    delFn(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },
    // 点击选中按钮
    changeFn(id) {
      const result = this.list.find((item) => item.id === id)
      result.isDone = !result.isDone
    },

    // 添加功能
    addFn(name) {
      this.list.unshift({
        id: Date.now(),
        name,
        isDone: false,
      })
    },
    filter(type) {
      this.type = type
    },
    // 清除完成事件
    cleardata() {
      this.list = this.list.filter((item) => !item.isDone)
    },
  },

  computed: {
    deleList() {
      return this.list.filter((item) => !item.isDone).length
    },

    // 显示清除的功能按钮
    showBtn() {
      return this.list.some((item) => item.isDone)
    },
  },
}
</script>

<style></style>
